<template>
	<view class="cart">
		<!-- 购物袋组件 -->
		<view class="cart-total">
			<!-- 图标 -->
			<view class="cart-icon" @click="showPopup">
				<i class="iconfont icon-gouwudai"></i>
				<u-badge :value="cartNum" showZero absolute :offset="[0,0]"></u-badge>
			</view>
			<!-- 金额 -->
			<view class="cart-money">￥{{cartTotal}}</view>
			<!-- 按钮 -->
			<view class="cart-button">
				<u-button text="去结算" :customStyle="cartButtonStyle" @click="onClickPay"></u-button>
			</view>
		</view>

		<!-- 购物袋弹框 -->
		<u-popup :customStyle="popupStyle" :show="popupShow" mode="bottom" @close="closePopup">
			<!-- 购物袋 -->
			<view class="shopper">
				<!-- 顶部 清空 -->
				<view class="shopper-clearAll">
					<view class="shopper-clearAll__button">
						<u-button icon="trash" text="清空" :customStyle="shopperClearBtnStyle"
							@click="onClickClear"></u-button>
					</view>
				</view>
				<!-- 商品列表 -->
				<view class="goodsList">
					<block v-for="good in cartGoods" :key="good.id">
						<goodCard :good="good" :showSkuBtn="false" showNumberBox @numChanged="numChanged"></goodCard>
					</block>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "cart",
		props: {
			// 购物车商品信息
			cartGoods: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				// 样式
				cartButtonStyle: {
					height: '100%',
					color: '#fff',
					backgroundColor: '#ff516b',
					border: 'none',
					borderRadius: '0px'
				},
				popupStyle: {
					transform: 'translateY(-78rpx)',
					zIndex: '9999',
				},
				shopperClearBtnStyle: {
					height: '100%',
					backgroundColor: 'transparent',
					border: 'none'
				},
				// 展示弹出层
				popupShow: false,
			};
		},
		computed: {
			// 购物车商品种类数量
			cartNum() {
				return this.cartGoods?.length || 0;
			},
			// 购物车商品总价
			cartTotal() {
				// console.log(this.cartGoods);
				return this.cartGoods.reduce((a, b) => a + b.num * b.price, 0).toFixed(2);
			},
		},
		methods: {
			// 打开弹出层
			showPopup() {
				this.popupShow = true;
			},
			// 关闭弹出层
			closePopup() {
				this.popupShow = false;
			},
			// 通知父组件商品数量发生变化
			numChanged(value, id) {
				this.$emit('numChanged', value, id);
			},
			// 通知父组件点击了清空按钮
			onClickClear() {
				this.$emit('clear');
			},
			// 通知父组件点击了结算按钮
			onClickPay() {
				this.$emit('pay');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cart {
		.cart-total {
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 999999;
			width: 100%;
			height: 80rpx;
			background-color: #f6f6f6;
			display: flex;
			align-items: center;
			justify-content: space-between;

			// 图标
			.cart-icon {
				flex-shrink: 0;
				height: 100rpx;
				width: 100rpx;
				background-color: #fff;
				border-radius: 50%;
				margin-left: 36rpx;
				transform: translateY(-20rpx);

				.iconfont {
					font-size: 60rpx;
					line-height: 100rpx;
					text-align: center;
				}
			}

			// 金额
			.cart-money {
				flex: 1;
				margin-left: 36rpx;
			}

			// 按钮
			.cart-button {
				flex-shrink: 0;
				height: 100%;
				width: 200rpx;
			}
		}


		// 购物袋
		.shopper {
			width: 100%;
			height: 70vh;
			background-color: #fff;
			padding-bottom: 20rpx;
			display: flex;
			flex-direction: column;

			// 顶部 清空
			.shopper-clearAll {
				flex-shrink: 0;
				height: 80rpx;
				background-color: #f6f6f6;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.shopper-clearAll__button {
					height: 100%;
					width: 200rpx;
				}
			}

			// 商品列表
			.goodsList {
				flex: 1;
				overflow: auto;
				padding: 40rpx;
			}
		}
	}
</style>